<template>
  <div class="image-container">
    <!-- header -->
    <ImageHeader />
    <FixedPlan class="fixed left-[60px] top-[140px] z-40" />
    <FixedScale class="fixed right-[60px] top-[140px] z-40" v-model="configStore.scale" />
    <!-- image -->
    <div class="image" ref="imgContainer">
      <!-- 铁塔曲线canvas -->
      <TowerCanvas :config="configStore.config!" :tower-data="towerPointStore.points" />
      <ScaleCanvas :config="configStore.config!" />
      <CurveCanvas :config="configStore.config!" :calc-curve-date="calcBetStore.calcBets" />
    </div>
  </div>
</template>

<script setup lang="ts">
import FixedPlan from '@/components/image/FixedPlan.vue'
import FixedScale from '@/components/image/FixedScale.vue'
import ImageHeader from '@/components/image/ImageHeader.vue'
import CurveCanvas from '@/components/image/LineCanvas/CurveCanvas.vue'
import ScaleCanvas from '@/components/image/LineCanvas/ScaleCanvas.vue'
import useCalcBetstore from '@/states/useCalcBetstore'
import useConfigStore from '@/states/useConfigStore'
import useTowerPointStore from '@/states/useTowerPointStore'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import TowerCanvas from '../../components/image/LineCanvas/TowerCanvas.vue'
const imgContainer = ref<HTMLDivElement>()

const route = useRoute()
const towerPointStore = useTowerPointStore()
const calcBetStore = useCalcBetstore()
const configStore = useConfigStore()
towerPointStore.all({ id: +route.params.id })

onMounted(async () => {
  await configStore.getConfig(+route.params.id, imgContainer.value!)
})
</script>

<style scoped lang="scss">
.image-container {
  @apply w-full h-full grid grid-rows-[50px_1fr];
  .image {
    @apply relative overflow-scroll;
  }
}
</style>

<script lang="ts">
export default {
  route: {
    path: '/home/image/:id',
    name: 'image',
  },
}
</script>
